<template>
  <div>
    <el-input
      v-model="changeSelectValue"
      v-bind="{ ...item }"
      readonly="readonly"
      suffix-icon="el-icon-arrow-down"
      @click.native="onClick"
    >
    </el-input>
    <van-popup round closeable lazy-render v-model="showPicker" position="bottom">
      <div>
        <div class="title">
          <b>{{ item.placeholder || '请选择' }}</b>
        </div>
        <div class="select-body">
          <dl class="select-option">
            <dd
              v-for="option in getOptions()"
              :key="option.value"
              class="select-option-item"
              :class="value == option.value ? 'select-option-item-checked' : ''"
              @click="onConfirm(option.value)"
            >
              <i></i>
              <div>{{ option.label }}</div>
            </dd>
          </dl>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import mixin from '../mixin'
import Vue from 'vue'
import { Popup } from 'vant'

Vue.use(Popup)

export default {
  name: 'MobileTSelect',
  mixins: [mixin],
  data() {
    return {
      showPicker: false
    }
  },
  created() {
    console.log(this.value)
    console.log(this.item)
    console.log(this.examConfig)
  },
  computed: {
    changeSelectValue() {
      const options = this.getOptions()
      const value = options.find((e) => e.value === this.value)
      if (value) {
        return value.label
      }
      return ''
    }
  },
  methods: {
    onClick() {
      this.showPicker = true
    },
    onConfirm(value) {
      this.changeValue = value
      this.showPicker = false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  max-width: 80%;
  font-size: 16px;
  margin-top: 8px;
  margin-left: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-body {
  height: 44vh;
  overflow: hidden;
  overflow-y: auto;
  font-size: 16px;

  .select-option {
    padding-bottom: 30px;
  }
  .select-option-item {
    padding: 5px 18px;
    display: flex;

    i {
      background-color: #eff1f4;
      border-radius: 100%;
      box-sizing: border-box;
      cursor: pointer;
      display: block;
      height: 18px;
      margin-top: 3px;
      overflow: hidden;
      position: relative;
      width: 18px;
    }

    div {
      flex: 1;
      overflow: hidden;
      line-height: 22px;
      padding-left: 10px;
    }
  }
  .select-option-item-checked {
    i {
      border: 5px solid var(--color-primary);
    }
  }
}
</style>
